<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-原生ajax2</title>
    <style>
        table {
            border-collapse: collapse;
        }

        td,
        th {
            border: 1px solid #cccccc;
            text-align: center;
            padding: 2px 10px;
        }
    </style>
</head>

<body>
    <button id="btn">获取数据</button>
    <br><br>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
    <script>
        //封装一个创建标签的方法
        function c(v) {
            return document.createElement(v)
        }
        btn.onclick = function () {
            // GET 方式请求
            //1. 创建AJAX对象：采用http协议请求XML数据的对象
            let xhr = new XMLHttpRequest()
            //2. 初始化 设置请求方法 和 URL
            //必须要明确请求的方式：GET / Post
            //必须要传一个请求的地址，请求一个本地的json文件
            // xhr.open('GET', './data/stus.json');
            xhr.open('GET','https://www.easy-mock.com/mock/5fa610d34096d37b31fccf51/getStudents')
            //3.发送
            xhr.send()
            //4. 事件绑定 处理服务端返回的结果
            xhr.onreadystatechange = function () {
                //判断xhr的请求状态 （分为：0，1，2，3，4） 就是一个请求经历的过程
                //0：请求未初始化，还没有调用 open()
                //1：请求已经建立，但是还没有发送，还没有调用 send()
                //2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）
                //3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
                //4：响应已完成；您可以获取并使用服务器的响应了。
                if (xhr.readyState === 4) {
                    //判断响应状态码 
                    //200(成功) 
                    //304(第二重复请求) 
                    //404(没有找到请求的资源) 
                    //403(请求资源的访问被服务器拒绝) 
                    //401(请求需要有通过 HTTP 认证的认证信息) 
                    //500(服务器端在执行请求时发生了错误)
                    //状态码总结：2**成功 3**重定向 4**客户端错误 5**服务器错误
                    if (xhr.status >= 200 && xhr.status < 400) {
                        //JSON.parse()方法，用于将json字符串数据转为js对象
                        let stus = JSON.parse(xhr.response)
                        tbody.innerHTML = ""
                        stus.forEach(stu => {
                            let tr = c("tr")
                            let td1 = c("td")
                            td1.innerText = stu.name
                            let td2 = c("td")
                            td2.innerText = stu.age
                            let td3 = c("td")
                            td3.innerText = stu.gender
                            tr.appendChild(td1)
                            tr.appendChild(td2)
                            tr.appendChild(td3)
                            tbody.appendChild(tr)
                        });
                    }else{
                        console.log('请求数据失败！');
                    }
                }
            }
        }
    </script>
</body>

</html>